<template>
  <div class="container">
    <div class="left">
      <div class="userinfo">
        <el-image
          :src="require('@/assets/img/default-avatar.png')"
          class="avatar"
          v-if="userInfo.avatar === '默认头像' || !userInfo.avatar"
        ></el-image>
        <el-image
          :src="userInfo.avatar | formatFile"
          class="avatar" v-else
        ></el-image>
        <div class="flex-1">
          <div class="flex-x-bet-y-center" style="flex-wrap:wrap;padding-bottom: 10px;">
            <span class="nickname">{{ userInfo.nickname }}</span>
            <div class="realname-btn" @click="$router.push('/realNameForm')" v-if="userInfo.isReal == 2">实名认证</div>
          </div>
          <div class="phone">{{userInfo.phone}}</div>
        </div>
      </div>
      <div class="vip-info flex-xy-center" v-if="userInfo.isVip == 1">
        <div class="vip-box flex-xy-center">
          <img src="@/assets/img/icon-vip.png" class="icon-vip" alt="" />
          <span>月度会员到期时间:{{userInfo.vipEnd}}</span>
        </div>
      </div>
      <div class="menus">
        <el-menu
          :default-active="currentMenu"
          class="el-menu-vertical-demo"
          @select="menuSelect"
          active-text-color="#fe5a13"
        >
          <el-menu-item :index="item.path" v-for="item in menuList" :key="item.path">
            <img v-if="currentMenu == item.path" class="icon" :src="item.selectIcon" />
            <img v-else class="icon" :src="item.icon" />
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="right">
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "UserIndex",

  data() {
    return {
      menuList: [
        {
          icon: require("@/assets/img/icon-mine1.png"),
          selectIcon: require("@/assets/img/icon-mine1-1.png"),
          title: "会员中心",
          path: "/vip",
        },
        {
          icon: require("@/assets/img/icon-mine2.png"),
          selectIcon: require("@/assets/img/icon-mine2-1.png"),
          title: "购买订单",
          path: "/orderList/self",
          childrenPath: ["/orderDetail/self"],
        },
        {
          icon: require("@/assets/img/icon-mine2.png"),
          selectIcon: require("@/assets/img/icon-mine2-1.png"),
          title: "商家订单",
          path: "/orderList/sell",
          childrenPath: ["/orderDetail/sell"],
        },
        {
          icon: require("@/assets/img/icon-mine3.png"),
          selectIcon: require("@/assets/img/icon-mine3-1.png"),
          title: "需求管理",
          path: "/demandList",
        },
        {
          icon: require("@/assets/img/icon-mine4.png"),
          selectIcon: require("@/assets/img/icon-mine4-1.png"),
          title: "厂商管理",
          path: "/userProductList/device",
        },
        {
          icon: require("@/assets/img/icon-mine5.png"),
          selectIcon: require("@/assets/img/icon-mine5-1.png"),
          title: "二手管理",
          path: "/userProductList/used",
        },
        {
          icon: require("@/assets/img/icon-mine6.png"),
          selectIcon: require("@/assets/img/icon-mine6-1.png"),
          title: "租赁管理",
          path: "/userProductList/lease",
        },
        {
          icon: require("@/assets/img/icon-mine7.png"),
          selectIcon: require("@/assets/img/icon-mine7-1.png"),
          title: "我的钱包",
          path: "/wallet",
          childrenPath: ["/balanceRecord", "/withdraw"],
        },
        {
          icon: require("@/assets/img/icon-mine8.png"),
          selectIcon: require("@/assets/img/icon-mine8-1.png"),
          title: "我的收藏",
          path: "/collect",
        },
        {
          name: 'store',
          icon: require("@/assets/img/icon-mine9.png"),
          selectIcon: require("@/assets/img/icon-mine9-1.png"),
          title: "我的店铺",
          path: "/registerUser2Enterprise",
        },
        {
          icon: require("@/assets/img/icon-mine10.png"),
          selectIcon: require("@/assets/img/icon-mine10-1.png"),
          title: "我的举报",
          path: "/reportList",
        },
        {
          icon: require("@/assets/img/icon-mine11.png"),
          selectIcon: require("@/assets/img/icon-mine11-1.png"),
          title: "帮助中心",
          path: "/helpCenter",
        },
        {
          icon: require("@/assets/img/icon-mine12.png"),
          selectIcon: require("@/assets/img/icon-mine12.png"),
          title: "客服热线",
          path: "/12",
        },
        {
          icon: require("@/assets/img/icon-mine13.png"),
          selectIcon: require("@/assets/img/icon-mine13.png"),
          title: "退出账号",
          path: "logout",
        },
      ],
    };
  },
  created() {
    this.$bus.$emit("showBreadCrumb", false);
    // 是企业
    if(this.userInfo.isFirm == 1){
      const storeMenu = this.menuList.find(item => item.name && item.name === 'store')
      storeMenu.path = '/shopInfo'
    }
  },
  beforeDestroy() {
    this.$bus.$emit("showBreadCrumb", true);
  },
  computed: {
    currentMenu() {
      let menu = this.menuList.find((item) => item.path.indexOf(this.$route.path) !== -1);
      let isChildMenu = this.menuList.find(
        (item) => item.childrenPath && item.childrenPath.includes(this.$route.path)
      );
      if (!menu && !isChildMenu) {
        return "";
      }

      if (menu) {
        return this.$route.path;
      } else {
        return isChildMenu.path;
      }
    },
    ...mapGetters(['userInfo'])
  },
  methods: {
    menuSelect(e) {
      console.log(e);
      if (e.startsWith("/")) {
        this.$router.push(e);
      } else {
        if (e === "logout") {
          this.$modal.confirm("确定要退出吗？").then((res) => {
             if(res === 'confirm'){
              this.$store.dispatch('user/LogOut')
             }
            })
            .catch((err) => {});
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 1200px;
  margin: 30px auto;
}

.left {
  display: flex;
  flex-direction: column;
  width: 300px;
  border-radius: 2px 2px 2px 2px;

  .userinfo {
    display: flex;
    align-items: center;
    padding: 30px 20px 15px;
    border-bottom: 1px solid #f1f1f1;
    background: #ffffff;

    .avatar {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 18px;
    }

    .nickname {
      font-weight: normal;
      font-size: 18px;
      color: #333333;
      
    }

    .realname-btn {
      text-align: center;
      width: 88px;
      line-height: 32px;
      background: #fe5a13;
      border-radius: 4px 4px 4px 4px;
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
      cursor: pointer;
    }

    .phone {
      font-weight: normal;
      font-size: 18px;
      color: #333333;
    }
  }

  .vip-info {
    display: flex;
    align-items: center;
    height: 44px;
    border-radius: 2px 2px 2px 2px;
    font-weight: normal;
    font-size: 15px;
    color: #333333;
    padding: 20px 10px;
    background: #ffffff;

    .vip-box {
      background: #f7f7f7;
      margin: 0 auto;
      padding: 12px;
    }

    .icon-vip {
      width: 31px;
      height: 25px;
      margin-right: 10px;
    }
  }

  .menus {
    flex: 1;
    width: 300px;
    background: #fff;
    margin-top: 20px;

    .icon {
      width: 24px;
      height: 24px;
      margin-right: 15px;
    }

    ::v-deep .el-menu-item {
      font-weight: normal;
      font-size: 16px;
      color: #666666;
    }

    ::v-deep .el-menu {
      border: 0;
    }

    ::v-deep .is-active {
      background-color: #ffefe7;
    }
  }
}

.right {
  flex: 1;
  background: #fff;
  margin-left: 20px;
}
</style>
